<template>
  <view class="orderListItem" @click="handleDetail">
    <view class="code">{{ data.returnorderCode }}</view>
    <view class="line">
      <view class="left">往来单位：{{ data.workhouseName || "-" }}</view>
      <view class="right">退货金额：{{ data.returnorderAmount }}</view>
    </view>
    <view class="line">
      <view class="left"
        >退货日期：{{ $u.timeFormat(data.returnorderDate, "yyyy-mm-dd") }}</view
      >
    </view>
    <view class="fixBtn" @click.stop="() => {}">
      <view class="btn">
        <up-button
          v-if="data.billState === 0"
          type="primary"
          @click="handleCancel"
          plain
          size="mini"
          shape="circle"
          text="作废"
        ></up-button>
      </view>
      <view class="btn">
        <up-button
          v-if="data.billState === 0"
          type="primary"
          @click="handleCheck"
          plain
          size="mini"
          shape="circle"
          text="审核"
        ></up-button>
      </view>
    </view>
    <view class="state">{{ data.billStateStr || "未知状态" }}</view>
  </view>
</template>

<!-- 退货单Item -->
<script setup>
const props = defineProps({
  data: {
    type: Object,
    default() {
      return {};
    },
  },
});
const emits = defineEmits(["check", "cancel", "detail"]);
const handleCancel = () => {
  emits("cancel", props.data);
};
const handleCheck = () => {
  emits("check", props.data);
};
const handleDetail = () => {
  emits("detail", props.data);
};
</script>

<style lang="scss">
.orderListItem {
  background: #ffffff;
  box-shadow: 0px 3px 12px 0px rgba(0, 0, 0, 0.05);
  border-radius: 4px;
  padding: 10px 13px;
  position: relative;
  overflow: hidden;

  .code {
    font-size: 13px;
    color: #4b4e50;
    line-height: 19px;
    margin-bottom: 13px;
  }

  .line {
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    justify-content: space-between;

    .left,
    .right {
      font-size: 12px;
      color: #4b4e50;
      line-height: 17px;
    }
  }

  .fixBtn {
    display: flex;
    align-items: center;
    justify-content: flex-end;

    .btn {
      width: 69px;

      & + .btn {
        margin-left: 10px;
      }
    }
  }

  .state {
    position: absolute;
    top: 11px;
    right: 13px;
    font-size: 12px;
    color: #ff4c4c;
    line-height: 17px;
    padding: 1px 4px 0 6px;
    background: #ffe3db;
    border-radius: 7px;
  }
}
</style>
